<template>
  <BaseCard title="API产品排行">
    <BaseTable :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="false">
      <template slot="index" slot-scope="{ index }">
        <div v-if="index < 3" class="circle active">{{ index + 1 }}</div>
        <div v-else class="circle">{{ index + 1 }}</div>
      </template>
    </BaseTable>
  </BaseCard>
</template>

<script>
import * as Ajax from '@/api/dashboard';
export default {
  data() {
    return {
      loading: true,
      columns: [
        {
          dataIndex: 'index',
          title: '排行',
          ellipsis: true,
          width: 60,
          scopedSlots: { customRender: 'index' },
        },
        {
          dataIndex: 'loanName',
          title: '产品名称',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'collisionNum',
          title: '撞库成功量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'applyReqNum',
          title: '进件推送量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'applyNum',
          title: '进件成功量',
          ellipsis: true,
          customRender: (text) => text === 0 ? 0 : (text || '/'),
        },
        {
          dataIndex: 'applySuccessPercent',
          title: '成功率',
          ellipsis: true,
          customRender: (text) => text + '%' || '/',
        },
      ],
      dataSource: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(time) {
      this.loading = true;
      Ajax.getApiTop(time).then(({ success, data }) => {
        if (success) {
          this.dataSource = Array.isArray(data) ? data : [];
        }
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  &.active {
    background-color: #ff4d4f;
    color: #fff;
  }
}

:deep(.ant-progress-text) {
  font-size: 12px;
}
</style>
